<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论（最多吐槽120字）" maxlength="120" v-model="content">

        </textarea>
        <mt-button type="primary" size="large" @click="addCom">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(c,i) in comments" :key="c.commentId">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{c.userName}}&nbsp;&nbsp;
                    发表时间：{{c.addTime | dateFmt()}}
                </div>
                <div class="cmt-body">
                   {{c.content}}
                </div>
            </div>
        </div>
         
        
        
        <mt-button type="danger" size="large" @click="loadMore()">加载更多</mt-button>
    </div>
    
</template>
<script>
import moment from 'moment'  //格式话时间
import {Toast} from 'mint-ui'
export default {
    props:["newsId"],
    data(){
        return {
            content:"",
            comments:[],
            pageNum:1,//用来记忆当前的页码
            totalPage:0

        }
    },
    methods:{
        //添加评论
        addCom(){
            let cm = {
                "content":this.content,
                "addTime":moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                "newsId":this.newsId,
                "userId":1
            }
            this.$ajax({
                url:"/addComment",
                method:"post",
                data:cm
              
            }).then(resp=>{
               
               
                //查询最新的评论
                // this.getCms();
               // this.comments.unshift({ "content":this.content,"addTime":moment(new Date()).format('YYYY-MM-DD'),"userName":"匿名用户"});
                 this.content = "";//评论清空
                 this.getCms();

            });

        },
        //加载下一页
        loadMore(){
            this.pageNum++;
            if(this.pageNum > this.totalPage){
                return Toast("亲，已经没有评论了。。。");

            }
            this.getCms();//加载更多是当前页以及下一页的数据都要显示出来的


        },
        //查询所有的评论
        getCms(){
            this.$ajax({
                url:"findComments",
                method:"get",
                params:{
                    newsId:this.newsId,
                    pageNum:this.pageNum

                }

            }).then(resp=>{
                if(this.pageNum ==  1){
                    this.comments = resp.data.message;//当前页的数据
                }else{
                    this.comments.push(...resp.data.message) ;//当前页的数据
                }
                
                this.totalPage = resp.data.fyobj;//总的页码

            });

        }

    },
    created(){
        this.getCms();
    }
}

</script>
<style scoped>

</style>
